<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style-card.css">
    <title>生日快乐</title>
</head>
<body>
    <!-- 背景音乐 -->
    <div class="music">
        <audio>
                <source src="../music/ohh.mp3" type="audio/mpeg"></source>
                不支持
        </audio>
    </div>
    <div class="card">
        <!-- 贺卡封面 -->
        <div class="cover">
            <div class="bark"></div>
            <img src="../img/ohh.jpeg" class="cover-jpg"/>
        </div>

        <!-- 贺卡内容 -->
        <div class="details">
            <h4 class="title">亲爱的小陈，生日快乐！</h4>
            <br />
            <p>
                hello，我最亲爱的小陈陈，今天是你的生日耶，今天也是和我家小陈陈
                在一起后过的第一个生日呢。那天晚上，你许愿吹蜡烛的样子真的好美！
                那天我好贪心哦，很想知道你许的是什么愿望，然后听到你说是和我有关的，
                那一刻觉得真的好甜蜜，心情美美的！以后的每个生日都要有我，听到没！
                很期待未来的生活，你还有雪糕糕，我们一起去旅行，一起去吃大餐，一起
                去兜风，一起去遛狗。真的真的很庆幸那天加了你的微信，我想那是我所有
                美好的开始！最后，生日快乐哟🎂，小陈陈，要天天开心哦！还有，要一直一直
                永远的爱我哦，就像我爱️你一样，嘻嘻。️
            </p>
			<br/>
            <p style="margin-left:3rem">你的爱人: 郑德伟</p>
			<p style="margin-right:1.5rem">&nbsp;&nbsp;2022年11月18日</p>
        </div>
    </div>
    <script>
        window.onload = () => {
            let audio = document.getElementsByTagName('audio')[0]; // 音频元素
            let card = document.getElementsByClassName("card")[0]; // 贺卡

            audio.volume = 0.4; // 控制音频音量

            card.addEventListener('click', ()=>{
                audio.play();
            });

            setTimeout(function () {
                audio.play();
            },3000)
        }

    </script>
</body>
</html>
